import React, { Component } from 'react';
import { connect } from 'react-redux';

import {
  Col,
  Form,
  FormControl,
  InputGroup,
  Row
} from 'react-bootstrap';

class App extends Component {

  state = {
    passwordFlg: true
  }

  render () {
    return (
      <Form>
        <Form.Group as={Row}>
          <Form.Label column sm={3}>
            服务器标识：
          </Form.Label>
          <Col sm={9}>
            <Form.Control id="hostName" autoComplete="off" placeholder="添加微服务时识别服务器（不可修改，最好包含所属环境参数）" />
          </Col>
        </Form.Group>
        {typeof this.props.projectId === "undefined" ?
          <Form.Group as={Row}>
            <Form.Label column sm={3}>
              所属项目：
          </Form.Label>
            <Col sm={9}>
              <Form.Control id="projectId" as="select">
                {Object.keys(this.props.projectList).map(key => {
                  let item = this.props.projectList[key];
                  return (
                    <option key={key} value={key}>{item.name}</option>
                  )
                })}
              </Form.Control>
            </Col>
          </Form.Group>
          : null}
        <Form.Group as={Row}>
          <Form.Label column sm={3}>
            地址：
          </Form.Label>
          <Col sm={4}>
            <Form.Control id="host" autoComplete="off" placeholder="必填" />
          </Col>
          <Form.Label column sm={2}>
            端口
          </Form.Label>
          <Col sm={3}>
            <Form.Control type="number" id="port" defaultValue={22} />
          </Col>
        </Form.Group>
        <Form.Group as={Row}>
          <Form.Label column sm={3}>
            用户名：
          </Form.Label>
          <Col sm={9}>
            <Form.Control id="username" autoComplete="off" placeholder="必填" />
          </Col>
        </Form.Group>
        <Form.Group as={Row}>
          <Form.Label column sm={3}>
            密码：
          </Form.Label>
          <Col sm={9}>
            <InputGroup>
              <FormControl
                id="password"
                type={this.state.passwordFlg ? "password" : "text"}
                autoComplete="off"
              />
              <InputGroup.Append>
                <InputGroup.Text className="eyeIcon" onClick={() => this.setState({ passwordFlg: !this.state.passwordFlg })}>&#xe648;</InputGroup.Text>
              </InputGroup.Append>
            </InputGroup>
          </Col>
        </Form.Group>
        <Form.Group as={Row}>
          <Form.Label column sm={3}>
            私钥路径：
          </Form.Label>
          <Col sm={9}>
            <Form.Control
              id="privateKeyPath"
              autoComplete="off"
              placeholder={"用来连接当前服务器使用的存储在" + this.props.deployHost + "服务器上的私钥路径"} />
          </Col>
        </Form.Group>
      </Form>
    )
  }
}

function mapStateToProps (state) {
  return {
    projectList: state.project,
    deployHost: state.deploy.deployHost,
  }
}

export default connect(mapStateToProps)(App);